<div class="crayons-card crayons-card--content-rows">
  <h2 class="crayons-subtitle-1">
    <%= t("views.settings.billing.heading") %>
  </h2>

  <% if current_user.stripe_id_code.blank? %>
    <%= form_tag stripe_active_cards_path, id: "credit-card-form", method: :post do %>
      <article>
        <% if flash[:error].present? %>
          <div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger" role="alert">
            <p><%= flash[:error] %></p>
          </div>
        <% end %>
      </article>

      <button id="add-credit-card-button" class="crayons-btn credit-card-button" type="button"><%= t("views.settings.billing.add") %></button>
    <% end %>
  <% else %>
    <div class="billing-history-header"><%= t("views.settings.billing.cards") %></div>
    <% @customer.sources.each do |source| %>
      <div class="billing-item">
        <p><%= t("views.settings.billing.number", brand: source.brand, last: source.last4) %></p>
        <p class="billing-item-detail"><%= t("views.settings.billing.exp", month: source.exp_month, year: source.exp_year) %></p>
        <% if source.id == @customer.default_source %>
          <p class="billing-item-detail billing-item-green"><%= t("views.settings.billing.primary") %></p>
          <%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
            <button class="crayons-btn crayons-btn--danger"><%= t("views.settings.billing.remove") %></button>
          <% end %>
        <% else %>
          <%= form_tag "/stripe_active_cards/#{source.id}", method: :patch do %>
            <button class="crayons-btn crayons-btn--secondary"><%= t("views.settings.billing.make") %></button>
          <% end %>
          <%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
            <button class="crayons-btn crayons-btn--danger"><%= t("views.settings.billing.remove") %></button>
          <% end %>
        <% end %>
      </div>
    <% end %>
    <%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
      <br />
      <div class="stripe-button-wrapper">
        <button id="add-credit-card-button" class="crayons-btn credit-card-button"><%= t("views.settings.billing.another") %></button>
      </div>
    <% end %>
  <% end %>
  <script src="https://checkout.stripe.com/checkout.js"></script>

  <script>
    setTimeout(function () {
      var handler = StripeCheckout.configure({
        key: '<%= Settings::General.stripe_publishable_key %>',
        image: "https://thepracticaldev.s3.amazonaws.com/i/xoxvppfjorrnxudkzskw.jpg",
        locale: 'auto',
        token: function (token) {
          var form = document.getElementById("credit-card-form")
          addHidden(form, 'stripe_token', token.id);
          form.submit();
        }
      });

      document.getElementById('add-credit-card-button').addEventListener('click', function (e) {
        // Open Checkout with further options:
        handler.open({
          description: '<%= t("views.settings.billing.add") %>',
          amount: 0,
          email: "<%= current_user.email %>",
          panelLabel: "<%= t("views.settings.billing.label") %>",
          allowRememberMe: false,
          zipCode: true,
        });
        e.preventDefault();
      });

      // Close Checkout on page navigation:
      window.addEventListener('popstate', function () {
        handler.close();
      });
    }, 220)

    function addHidden(theForm, key, value) {
      // Create a hidden input element, and append it to the form:
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = key; // 'the key/name of the attribute/field that is sent to the server
      input.value = value;
      theForm.appendChild(input);
    }
  </script>
</div>
